<template>
  <div id="seller" ref="seller">
    <div class="seller_content">
      <!--商家名称区-->
      <div class="overview">
        <h1 class="title" v-text="seller.name"></h1>
        <!--星星评分-->
        <div class="seller_desc">
          <v-star :size="36" :score="seller.score"></v-star>
          <span class="text" v-show="seller.ratingCount">({{seller.ratingCount}})</span>
          <span class="text" v-show="seller.sellCount">月售{{seller.sellCount}}单</span>
        </div>
        <!--起送价  商家配送价  送达时间-->
        <ul class="remark">
          <li class="block">
            <h2>起送价</h2>
            <div class="content">
              <span class="stress">{{seller.minPrice}}</span>元
            </div>
          </li>
          <li class="block">
            <h2>商家配送</h2>
            <div class="content">
              <span class="stress">{{seller.deliveryPrice}}</span>元
            </div>
          </li>
          <li class="block">
            <h2>平均配送时间</h2>
            <div class="content">
              <span class="stress">{{seller.deliveryTime}}</span>分钟
            </div>
          </li>
        </ul>
        <!--收藏-->
        <div class="collection" @click="toggleCollection($event)">
          <i class="iconfont" :class="{'active': collection}">&#xe603;</i>
          <span class="text" v-text="collectionText"></span>
        </div>
      </div>
      <!--分割层-->
      <v-split></v-split>
      <!--公告与活动-->
      <div class="seller_bulletin">
        <h1 class="title">公告与活动</h1>
        <div class="content_wrapper">
          <p class="content">{{seller.bulletin}}</p>
        </div>
        <!--优惠信息-->
        <ul v-if="seller.supports" class="privilege_content">
          <li class="privilege_item" v-for="item in seller.supports">
            <span class="icon_type" :class="classArr[item.type]"></span>
            <span class="type_content">{{item.description}}</span>
          </li>
        </ul>
      </div>
      <!--分割层-->
      <v-split v-show="seller.pics"></v-split>
      <!--商家图片区-->
      <div class="seller_pics" v-show="seller.pics">
        <h1 class="title">商家实景</h1>
        <div class="pic_wraaper" ref="picwrapper">
          <ul class="pic_list" ref="piclist">
            <li class="pic_item" v-for="pic in seller.pics">
              <img :src="pic" width="120" height="90" alt="sellerimge">
            </li>
          </ul>
        </div>
      </div>
      <!--商家信息区-->
      <v-split></v-split>
      <div class="seller_info">
        <h1 class="title">商家信息</h1>
        <ul>
          <li class="info_item" v-for="info in seller.infos">{{info}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import split from 'components/split/split'
  import star from 'components/star/star'
  import BScroll from 'better-scroll'
  import {saveToLocal, getLocal} from '../../common/js/store'
  export default {
    data() {
      return {
        classArr: [],
        collection: false
      }
    },
    props: {
      seller: Object
    },
    computed: {
      collectionText() {
        return this.collection ? '已收藏' : '收藏'
      }
    },
    components: {
      'v-star': star,
      'v-split': split
    },
    methods: {
      _initScroll() {
        if(!this.scroll) {
          this.scroll = new BScroll(this.$refs.seller, {
            click: true
          })
        }else {
          this.scroll.refresh()
        }
      },
      _initPicsScroll() {
        if(this.seller.pics) {
          let picWidth = 120
          let margin = 6
          let width = (picWidth + margin) * this.seller.pics.length - margin
          this.$refs.piclist.style.width = width + 'px'
          if(!this.picScroll) {
            this.picScroll = new BScroll(this.$refs.picwrapper, {
              scrollX: true,
              eventPassthrough: 'vertical'
            })
          }else {
            this.picScroll.refresh()
          }
        }
      },
      toggleCollection(e) {
        if(!e._constructed) {return}
        this.collection = !this.collection
        saveToLocal(this.$route.params.id, 'collection', this.collection)
      }
    },
    mounted() {
      this.classArr = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      this._initScroll()
      this._initPicsScroll()
      this.collection = getLocal(this.$route.params.id, 'collection', false)
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../common/styles/mixin";
  $rgb: rgb(7, 17, 27);
  $rgba: rgba(7, 17, 27, 0.1);
  #seller {
    position: absolute;
    top: 174px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    .seller_content {
      .title {
        line-height: 14px;
        color: rgb(7, 17, 27);
        font-size: 14px;
        margin-bottom: 8px;
      }
      /*商家名称区*/
      .overview {
        position: relative;
        padding: 18px;
        .seller_desc {
          padding-bottom: 18px;
          font-size: 0;
          border-bottom: 1px solid rgba(7, 17, 27, 0.2);
          .star_content {
            display: inline-block;
            margin-right: 8px;
            font-size: 0;
          }
          .text {
            display: inline-block;
            vertical-align: top;
            margin-right: 12px;
            font-size: 10px;
            color: rgb(77, 85, 93);
          }
        }
        .remark {
          display: flex;
          padding: 18px;
          .block {
            flex: 1;
            text-align: center;
            border-right: 1px solid rgba(7, 17, 27, 0.1);
            &:last-child {
              border: none;
            }
            h2 {
              margin-bottom: 6px;
              line-height: 10px;
              font-size: 10px;
              color: rgb(147, 153, 159);
            }
            .content {
              line-height: 24px;
              font-size: 10px;
              color: rgb(7, 17, 27);
              .stress {
                font-size: 24px;
              }
            }
          }
        }
        .collection {
          position: absolute;
          right: 18px;
          top: 18px;
          width: 55px;
          padding-left: 12px;
          text-align: center;
          .iconfont {
            display: block;
            font-size: 24px;
            color: #d4d6d9;
            line-height: 24px;
            &.active {
              color: rgb(240, 20, 20);
            }
          }
          .text {
            line-height: 10px;
            font-size: 10px;
            color: rgb(77, 85, 93);
          }
        }
      }
      /*商家公告区*/
      .seller_bulletin {
        padding: 18px 18px 0 18px;
        .content_wrapper {
          padding: 0 12px 16px 12px;
          .content {
            color: rgb(240, 20, 20);
            line-height: 24px;
            font-size: 12px;
          }

        }
        .privilege_content {
          .privilege_item {
            padding: 16px 12px;
            font-size: 0;
            border-top: 1px solid $rgba;
            .icon_type {
              display: inline-block;
              width: 16px;
              height: 16px;
              margin-right: 6px;
              background-size: contain;
              background-repeat: no-repeat;
              vertical-align: top;
              &.decrease {
                @include bg-image('./iconImgs/decrease_4');
              }
              &.discount {
                @include bg-image('./iconImgs/discount_4');
              }
              &.guarantee {
                @include bg-image('./iconImgs/guarantee_4');
              }
              &.invoice {
                @include bg-image('./iconImgs/invoice_4');
              }
              &.special {
                @include bg-image('./iconImgs/special_4');
              }
            }
            .type_content {
              font-size: 12px;
              font-weight: 200;
              line-height: 16px;
              vertical-align: top;
              color: $rgb;
            }
          }
        }
      }
      /*商家图片区*/
      .seller_pics {
        padding: 18px;
        .title{
          margin-bottom: 12px;
        }
        /*横向图片滚动区*/
        .pic_wraaper {
          width: 100%;
          overflow: hidden;
          white-space: nowrap; /*超过宽度不发生换行*/
          .pic_list {
            font-size: 0;
            .pic_item {
              display: inline-block;
              margin-right: 6px;
              width: 120px;
              height: 90px;
              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
      }
      .seller_info {
        padding: 18px 18px 0 18px;
        .title {
          margin-bottom: 12px;
        }
        .info_item {
          padding: 16px 12px 16px 12px;
          color: $rgb;
          font-size: 12px;
          border-top: 1px solid $rgba;
        }
      }
    }
  }
</style>